<template>
  <section class="hot-card-root">
    <div @click="handleClick(item.title)" class="hot-card" v-for="(item,index) in $props.list">
      <span class="card-index">{{ index + 1 }}</span>
      <section class="card-text">
        <span>{{ item.title }}</span>
        <span>{{ item.disc }}</span>
      </section>
    </div>
  </section>
</template>
<script>
export default {
  name:'HotCard',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleClick(keyword) {
      window.open(`https://www.baidu.com/s?ie=UTF-8&wd=${keyword}`, '_blank')
    }
  },
  computed: {
  
  },
}
</script>

<style scoped>
.hot-card {
  color: rgb(111, 202, 241);
  display: flex;
  align-items: center;
  padding: 10px 20px 10px 0;
  margin: 10px;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, .7);
  border-color: rgba(111, 202, 241, .5);
  box-shadow: 0 0 8px rgba(111, 202, 241, .2);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  transition: all 1s;
}

.hot-card:hover {
  box-shadow: 0 0 8px rgba(111, 202, 241, .7);
}

.hot-card .card-index {
  font-weight: bold;
  font-size: 20px;
  padding: 0 20px;
}

.hot-card .card-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hot-card .card-text span:nth-child(1) {
  font-size: 20px;
}

.hot-card .card-text span:nth-child(2) {
  font-size: 12px;
}
</style>